<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Windows获取桌面坐标</title>
    <meta name="Description" content="如何获取桌面坐标 如何获取屏幕位置">
    <meta name="Keywords" content="桌面坐标 屏幕位置">
    <style type="text/css">

        html{
            padding: 0;
            margin: 0;
        }

        body{
            height:100vh;
            width: 100vw;
            padding:0;
            margin:0;
            background-color:blue;
        }
        .box{
            width: 300px;
            background:red;
            padding: 10px;
            position: fixed;
            top: 50vh;
            left: calc( 50vw - 150px);
            text-align: center;
        }

        .box-input{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .box-input div{
            text-align: center;
            display: block;
            background: #333;
            color: #fff;
            padding: 3px 5px;
            border-radius: 5px;
            cursor: move;
        }

        input{
            width: 100px;
        }
    </style>
</head>
<body style="" ondblclick="sayPosition()">
    <div class="box" id="box">
        <div class="box-input">
            <div>坐标</div>
            <input id="input">
            <div>按住我可以拖动</div>
        </div>
        <div style="background: #444;">
            <h3 style="color: #fff;">使用说明：</h3>
            <ul style="text-align: left;color: #fff;">
                <li>1.返回桌面</li>
                <li>按键盘【printScreen】截图桌面</li>
                <li>返回浏览器网页</li>
                <li>按F11全屏【很重要】</li>
                <li>按Ctrl+v粘贴图片</li>
                <li>【双击】你想要获取坐标的位置</li>
                <li>按【F11】退出全屏</li>
            </ul>
        </div>
    </div>
</body>
</html>

 <script type="text/javascript">
     let inputElement = document.getElementById("input")
     let boxElement = document.getElementById("box")
    function sayPosition() {
        console.log(event)
        inputElement.value = event.clientX + ',' + event.clientY
    }

    document.addEventListener('paste', function() {
        const e = event
        if (e.clipboardData && e.clipboardData.items) {
            let items = e.clipboardData.items || [];
            let file = null;
            if (items && items.length) {
                for (let i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        file = items[i].getAsFile();
                    }
                }
            }
            console.log(file)
            imgReader(file)
            // 获取文件之后就可以上传服务器或者其他操作啦
        }
    });

     function imgReader( item ){
         const blob = item
         const reader = new FileReader();
         reader.onload = function( e ){
            document.body.style.backgroundImage = "url('" + e.target.result+ "')"
         };
         reader.readAsDataURL(blob);
     }

        const box = document.querySelector('#box');
        box.onmousedown = function (event) {
            var x = event.offsetX;
            var y = event.offsetY;
            document.onmousemove = function (e) {

                box.style.left = e.clientX - x + 'px';
                box.style.top = e.clientY - y + 'px';
            }
        }
        box.onmouseup = function () {
            document.onmousemove = function () {
            }
        }

 </script>